<template>
    <div style="width: 980px;">
        <div style="width: 980px; margin-bottom:60px;" v-loading.fullscreen.lock="fullscreenLoading">

            <div>
                <h3 style="margin: 15px 0 10px 20px">全部小说</h3>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none;" v-for="b in bookList" :key="b.id">
                        <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank">
                            <div style="width: 980px;height: 180px;padding: 15px">
                                <div style="width: 130px ;float: left">
                                    <img style="width: 100%;height: 100%;border-radius: 4%"
                                         :src="b.cover">
                                </div>
                                <div style=" width: 600px;font-size: 14px;float: left;padding: 10px 30px">
                                    <h3>{{b.name}}</h3>
                                    <div style="margin: 10px 0;display: flex;font-size: 16px">
                                        <div>类型：{{b.bookType}}</div>
                                    </div>
                                    <div style="display:flex;margin: 10px 0;">
                                        标签:
                                        <div style="padding-left: 10px">{{b.bookLabel}}</div>
                                    </div>
                                    <div style=" font-size:12px;line-height:1.8em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                        简介： {{b.intro}}
                                    </div>
                                </div>
                                <div style="width: 130px ;float: left">
                                    <div style="background-color: dodgerblue;width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 16px;border-radius: 20px;color: #FFFFFF;margin-top: 30px">
                                        开始阅读
                                    </div>
                                    <div style="background-color: #ffc423;width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 16px;border-radius: 20px;color: #FFFFFF;margin-top: 30px">
                                        加入书架
                                    </div>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div>
                <div v-if="loadState" style="padding: 20px;margin-left: 450px;" @click="loadMore()">加载更多</div>
                <div v-else style="margin-left: 420px;padding: 20px;">已经加载全部内容！</div>
            </div>
        </div>
        <el-backtop>
            👆
        </el-backtop>
    </div>


</template>

<script>
    import request from "../utils/request";

    export default {
        name: "AllStory",
        data() {
            return {
                fullscreenLoading: false,
                bookList: [],
                currentPage: 1,
                pageSize: 12,
                total: 0,
                loadState: true,



            }
        },
        mounted() {
            this.handleClick()

        },
        methods: {
            handleClick() {
                    this.currentPage = 1,
                    this.pageSize = 12,
                    this.total = 0,
                    this.loadState = true
                request.get("/book/search", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res.data.records)
                    if (res.data.records.length < this.pageSize) {
                        this.loadState = false
                    }
                    this.bookList = res.data.records
                    this.total = res.data.total
                })
            },
            loadMore() {
                console.log("loadMore")
                request.get("/book/search", {
                    params: {
                        pageNum: this.currentPage + 1,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res.data.records)
                    if (res.data.records.length < this.pageSize) {
                        this.loadState = false
                    }
                    this.bookList.push(...res.data.records)
                    this.total += res.data.total
                    this.currentPage++;
                })

            },
        },

    }
</script>

<style scoped>

</style>